<template>
  <div class="billOrderMenu">
    <div class="billOrder">
      <!-- 弹框 -->
      <invoice v-if="isInvoice" @closeTip="closeTip" :row="row"></invoice>
      <notice v-if="isNotice" @closeTip="closeTip" :noticeVal="row"></notice>
      <div class="headerMenu">
        <split-vertical title="采购发票"></split-vertical>
        <v-form :formProps="searchForm" ref="form"
                v-on:handleReset="handleReset"
                v-on:coverFormData="coverFormData">
        </v-form>
      </div>
      <div class="stand">
        <div style="line-height:50px;margin-left:10px;">
          <v-button :operationBtnArray="operationBtnArray" v-on:handleSearchTopBtn="handleSearchTopBtn"></v-button>
        </div>
        <div style="margin:0 10px;">
          <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation"></v-table>
        </div>
        <el-dialog title="开票详情" :visible.sync="dialogTableVisible" width="70%">
          <v-table :tableParams="paymentInfo" v-on:handleOperation="btnOperation"  style="min-height: 300px!important;"></v-table>
          <el-dialog
            width="40%"
            title="上传图片"
            :visible.sync="innerVisible"
            append-to-body>
            <el-upload
              style="min-height: 220px;"
              class="upload-demo"
              action="/api/erp/v1/pur/invoice/upload/invoice"
              :data="{id:id,userId:userId}"
              :on-success="onSuccess"
              :on-error="onError"
              :show-file-list="true"
              multiple
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-dialog>
        </el-dialog>

      </div>
      <div class="block1">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageCount">
        </el-pagination>
      </div>

    </div>
  </div>
</template>
<script>
  import VTable from "components/common/PageTable/VTable"
  import invoice from 'components/base/billOrder/invoice.vue'
  import notice from 'components/base/billOrder/notice.vue'
  import SplitVertical from "components/common/SplitVertical"
  import VForm from "components/common/VForm"
  import VButton from "components/common/VButton"
  import {localStorage} from "js/localStorage"
 let  invoiceTypes={
    "1":"普通发票",
    "2":'专用发票'
  }
  export default {
    components: {
      invoice, notice, VTable, SplitVertical, VForm, VButton,
    },
    data() {
      return {
        userId:'',
        id:'',
        fileList:[],
        innerVisible:false,
        dialogTableVisible:false,
        show:false,
        operationBtnArray: [{
          text: '刷新',
          show: true,
          type: 'primary',
          icon:'el-icon-refresh',
          methodName: 'refresh',
        },
          {
        text: '导出',
        show: true,
        type: 'warning',
        icon: 'el-icon-download',
        methodName: 'exportInvoice',
        }
        ],
        pageCount: null,
        pageIndex: 1,
        pageSize: 10,
        //v-model绑定的值
        purBillsDate: '',
        purBillsId: '',
        supplyCode: '',
        companyName: '',
        resOptions: [],
        isInvoice: false,
        isNotice: false,
        checkBill: [],
        //仓库列表
        companyData: [],
        row: {},
        searchForm: {
          col: 4,
          labelWidth: '120px',
          submitBtn: {
            text: '搜索'
          },
          formItemArray: [{
            label: '订单开始日期',
            prop: 'purBillsStartDate',
            format: "yyyy-MM-dd HH:mm:ss",
            placeholder: "请选择时间",
            itemType: 'dateTime',
            value: ''
          },
            {
              label: '订单截止日期',
              prop: 'purBillsEndDate',
              format: "yyyy-MM-dd HH:mm:ss",
              placeholder: "请选择时间",
              itemType: 'dateTime',
              value: ''
            }, {
              label: '供应商',
              placeholder: "请选择",
              prop: 'supplyId',
              itemType: 'select',
              options: [],
              value: ''
            }, {
              label: '采购公司',
              placeholder: "请选择",
              prop: 'companyId',
              itemType: 'select',
              options: [],
              value: ''
            }, {
              label: '开票状态',
              placeholder: "请选择",
              prop: 'invoiceType',
              itemType: 'select',
              options: [{
                label: '未开票',
                value: 1
              }, {
                label: '已开票',
                value: 2
              }],
              value: ''
            }, {
              label: '合同编号',
              placeholder: "请输入",
              prop: 'purBillsId',
              value: ''
            }]
        },
        tableParams: {
          dataArray: [],
          operationColumnWidth:120,
          showMultiSelection: false,
          columnArray: [
            {label: '单据合同编号', prop: 'purBillsId', width: '180', sortable: false},
            {label: '订单日期', prop: 'purBillsDate', sortable: false},
            {label: '采购公司', prop: 'companyName', sortable: false},
            {label: '供应商', prop: 'supplyName', sortable: false},
            {label: '采购金额', prop: 'totalPrice', width: '80', sortable: false},
            {label: '调整金额', prop: 'adjustMoney', width: '80', sortable: false},
            {label: '已申请打款金额', prop: 'giveMoney', width: '120', sortable: false},
            {label: '已开票金额', prop: 'invoiceMoney', width: '100', sortable: false},
            {label: '开票数量', prop: 'openNumber', width: '80', sortable: false},
            {label: '申请人', prop: 'username', width: '80', sortable: false}
          ],
          rowHandle: {
            buttonArray: [
              {
                text: '开票',
                show: true,
                type: 'text',
                methodName: 'invoice'
              }
            ],
            deleted: {
              show: false
            },
            update: {
              show: false
            },
          }
        },
        paymentInfo: {
          dataArray: [],
          operationColumnWidth:120,
          showMultiSelection: false,
          columnArray: [
            {label: '收票日期', prop: 'receiptDate', width: '180', sortable: false},
            {label: '开票日期', prop: 'kaipiaoDate', sortable: false},
            {label: '开票公司', prop: 'kaipiaoCompany', sortable: false},
            {label: '收票公司', prop: 'companyName', sortable: false},
            {label: '商品名称', prop: 'productName', width: '80', sortable: false},
            {label: '发票金额', prop: 'invoiceMoney', width: '80', sortable: false},
            {label: '不含税金额', prop: 'noTax', width: '95', sortable: false},
            {label: '税额', prop: 'hanTax', width: '100', sortable: false},
            {label: '付款日期', prop: 'payDate', width: '80', sortable: false},
            {label: '类型', prop: 'invoiceType', width: '80', sortable: false},
            {label: '录入人', prop: 'username', width: '80', sortable: false}
          ],
          rowHandle: {
            buttonArray: [
              {
                text: '上传',
                show: true,
                type: 'text',
                methodName: 'uploadImg'
              }
            ],
            update: {
              show: false
            },
          }
        },
        searchCondition: {}
      }
    },
    filters: {
      purBillsDate(val) {
        return val.slice(0, 10)
      },
    },

    created() {
      this.userId=localStorage.get("userID")
      this.init()
    },
    methods: {
      onSuccess(response, file, fileList){
        if (response.code === 'ERROR'){
          fileList.splice(fileList.length-1,1);
        }
        this.$message.success(response.msg)
      },
      onError(err){
        this.$message.error(err.msg)
      },
      handleSearchTopBtn(methodName) {
        if(methodName === "refresh"){
          this.refresh();
        }else{
          this.exportInvoiceExcel()
        }
      },
      exportInvoiceExcel(){
        //  console.log("导出")
      },
      refresh() {
        this.findNewBill();
      },
      init() {
        this.findNewBill();
        this.getSupply();
        this.getCompany();
      },
      handleReset(formName) {
        this.$refs.form.resetForm(formName);
      },
      coverFormData(data) {
        this.searchCondition = data;
        this.pageIndex = 1;
        this.findNewBill()
      },
      handleOperation(rowIndex, row, methodName) {
        this.row = row;
        if (methodName === "view") {
          this.look();
        } else if (methodName === "invoice") {
          this.isInvoice = true;
        } else if (methodName === "notice") {
          this.notice();
        }
      },
      btnOperation(rowIndex, row, methodName){
        if (methodName === "view") {
          this.$router.push({
            path: '/bill-order-invoice-detail',
            query: {
              invoiceData:row,
              id:row.id
            }
          })
        } else if (methodName === "delete") {
          this.tips.ConfirmModal('确认要删除吗？', () => {
            let params = {
              id: row.id
            }
            let success = data => {
              if (data.code === 'OK') {
                this.$message.success("删除成功");
                this.look()

              } else {
                this.$message.error(data.msg);
              }
            }
            this.api.purInvoiceDelete(params, success)
          });
        } else if (methodName === "uploadImg") {
          this.id=row.id
          this.innerVisible=true
        }
      },
      getCompany() {
        let params = {
          pageIndex: 1,
          pageSize: 20,
        };
        let success = data => {
          if (data.code === 'OK') {
            this.searchForm.formItemArray.forEach(item => {
              if (item.prop === 'companyId') {
                item.options = this.buildExceptKeyAndValue(data.data, "companyName", "id", "label", "value");
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        };
        this.api.addCompanyList(params, success);
      },
      //获取供应商下拉列表
      getSupply() {
        let success = data => {
          if (data.code === 'OK') {
            this.searchForm.formItemArray.forEach(item => {
              if (item.prop === 'supplyId') {
                item.options = this.buildExceptKeyAndValue(data.data, "supplyName", "id", "label", "value");
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        };
        this.api.getSupply({}, success);
      },
      //关闭弹窗
      closeTip() {
        this.isInvoice = false;
        this.isNotice = false;
        this.findNewBill();
      },
      //查看
      look() {
        this.dialogTableVisible=true
        let params = {
          purBillsId: this.row.purBillsId,
          userId: this.userId,
        }
        let success = data => {
          if (data.code === "OK") {
             this.paymentInfo.dataArray=data.data.invoices
               data.data.invoices.forEach(item=>{
                 item.receiptDate=this.formatSystemDate(item.receiptDate)
                 item.kaipiaoDate=this.formatSystemDate(item.kaipiaoDate)
                 item.payDate=this.formatSystemDate(item.payDate)
                 item.invoiceType=invoiceTypes[item.invoiceType]
               })

          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.erpInvoiceGet(params, success)

      },
      //查询
      findNewBill() {
        let param = this.searchCondition;
        if (!param.pageIndex || !param.pageSize) {
          param['pageIndex'] = this.pageIndex;
          param['pageSize'] = this.pageSize;
        }
        let success = data => {
          if (data.code === 'OK') {
            this.pageCount = data.pageCount;
            this.tableParams.dataArray = data.data;
            data.data.forEach(element => {
               if (!element.totalPrice){
                  element.totalPrice = element.price;
               }
              element.purBillsDate = this.formatSystemDate(element.purBillsDate);
            });
          } else {
            this.$message.error(data.msg);
          }
        };
        this.api.buyInvoicePurList(param, success)
      },
      //打款通知
      notice() {
        this.isNotice = true
      },
      handleCurrentChange(val) {
        this.pageIndex = val;
        this.searchCondition['pageIndex'] = val;
        this.findNewBill();
      }
    },

  }
</script>
<style scoped>
  .el-dialog__wrapper {
    position: fixed;
    top: 20%;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
  }
</style>
<style lang="scss" scoped>
  .billOrderMenu {
    .billOrder {
      .block1 {
        padding: 10px 0;
        text-align: right;

      }
    }
    .headerMenu{
      padding:0 10px;
      border-left: 2px solid #e8e8e8;
      border-right: 2px solid #e8e8e8;
      border-bottom: 2px solid #e8e8e8;
    }
  }
</style>
